<template>
	<view>
		<uni-popup ref="popup" @change="change">
			<view class="popup">
				<view class="title">
					Change your phone
				</view>
				<!-- 基础表单校验 -->
				<uni-forms ref="form" :rules="rules" :modelValue="form" label-position="top" :label-width="300">
					<uni-forms-item label="Your old password" required name="email">
						<uni-easyinput v-model="form.old_password" type="password" placeholder="Confim your old password" />
					</uni-forms-item>
					<uni-forms-item label="Your new password" required name="email">
						<uni-easyinput v-model="form.new_password" type="password" placeholder="Confim your new password" />
					</uni-forms-item>
					<uni-forms-item label="Your new password" required name="email">
						<uni-easyinput v-model="form.confirm_password" type="password" placeholder="Confim your new password" />
					</uni-forms-item>
				</uni-forms>
				<view class="update" @click="update">
					Change
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					old_password: '',
					new_password: '',
					new_password: '',
				},
				// 校验规则
				rules: {
					old_password: {
						rules: [{
							required: true,
							errorMessage: 'required'
						}]
					},
					new_password: {
						rules: [{
							required: true,
							errorMessage: 'required'
						}]
					},
					new_password: {
						rules: [{
							required: true,
							errorMessage: 'required'
						}]
					},
				},
			}
		},
		props: ["show"],
		watch: {
			show() {
				if (this.show) {
					this.open()
				}
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			update() {
				this.$refs.form.validate().then(res => {
					this.$post('/user/changepwd', this.form).then(res => {
						this.$toast(res.msg)
						if (res.code == 1) {
							this.$refs.popup.close()
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/account/account"
								})
							}, 500)
						}
					})
				})
			},
			change(e) {
				if (!e.show) {
					this.$emit("update:show", false)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		background-color: #ffff;
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
		width: 80vw;

		.title {
			margin-bottom: 30rpx;
		}

		.update {
			background: #0C0E27;
			border-radius: 4rpx;
			color: #fff;
			font-size: 30rpx;
			padding: 20rpx;
			width: 300rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			text-align: center;
		}
	}
</style>